$(function(){
	let viewer = $("#contentViewer");
	$(".card").not('#contentViewer').click(function(){
		viewer.children('h2').html($(this).children('h2').html());
		viewer.children('.content').html($(this).children('.content').html());
		viewer.css('animation', "");
		console.log($(this).offset().top - $(document).scrollTop());
		viewer.css('top', $(this).offset().top - $(document).scrollTop());
		viewer.css('left', $(this).offset().left);
		viewer.css('animation', "toCenter .5s forwards");
		viewer.show();
		viewer.children('.content').fadeIn().css("display", "inline-block");
		viewer.addClass("scaleBig");
	});//card click
	
	viewer.click(function(){
		viewer.css('animation-direction', "alternate");
		viewer.css('animation-iteration-count', "2");
		viewer.fadeOut();
		viewer.children('.content').fadeOut()
	});
})//$()